import { useState } from "react";
import ProForm, {
  ProFormSelect,
  ProFormText,
  ProFormDependency,
} from "@ant-design/pro-form";
import { UploadOutlined } from "@ant-design/icons";
import { fetchList, add, remove, batchResultAdd } from "@/services/pore";
import { Button, message } from "antd";
import { history } from "umi";
import useCommonTable from "@/hooks/useCommonTable";
import useRemove from "@/hooks/useRemove";
import EditTable from "./components/table";
import SCTable from "./components/SCTable";
import LHTable from "./components/LHTable";
import { typeOptions, filterUpType } from "@/const";
import UploadCsv from "./components/UploadCsv";
import UploadExcel from "./components/UploadExcel";
import { exportToExcel } from "@/xlsx";

export default () => {
  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      valueType: "index",
      width: 50,
    },
    {
      title: "数据名称",
      dataIndex: "name",
    },
    {
      title: "类型",
      dataIndex: "type",
      valueType: "select",
      fieldProps: {
        options: typeOptions,
      },
    },
  ];

  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <ProForm.Group>
          <ProFormText
            label="数据名称"
            name="name"
            rules={[{ required: true, message: "请输入名称" }]}
          />
          <ProFormSelect
            width="lg"
            name="type"
            label="类型"
            allowClear
            fieldProps={{
              options: typeOptions,
            }}
            rules={[{ required: true, message: "请选择类型" }]}
          />
        </ProForm.Group>

        <ProFormDependency name={["type"]}>
          {({ type }) => {
            const obj = {
              不同应力: (
                <ProForm.Item
                  style={{ width: "100%" }}
                  name="poreStructureYlDtoList"
                >
                  <EditTable />
                </ProForm.Item>
              ),
              松弛: (
                <ProForm.Item
                  style={{ width: "100%" }}
                  name="poreStructureScDtoList"
                >
                  <SCTable />
                </ProForm.Item>
              ),
              老化: (
                <ProForm.Item
                  style={{ width: "100%" }}
                  name="poreStructureLhDtoList"
                >
                  <LHTable />
                </ProForm.Item>
              ),
            };
            return (
              type && (
                <>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "flex-end",
                      marginBottom: 20,
                    }}
                  >
                    {/* <Button
                      icon={<UploadOutlined />}
                      style={{ marginRight: 10 }}
                      onClick={() => {
                        const fields = {
                          不同应力: {
                            样品名称: "",
                            "样品厚度 mm": "",
                            "σ0.4/MPa": "",
                            重量g: "",
                            "密度g/cm3": "",
                            "平均孔径 μm": "",
                            平均圆度: "",
                            平均面积: "",
                            "等面积圆直径 μm": "",
                            泡体直径: "",
                          },
                          松弛: {
                            样品名称: "",
                            "样品厚度 mm": "",
                            "压缩应变40%载荷N": "",
                            "10min载荷N": "",
                            "191min载荷N": "",
                            "10min松弛率": "",
                            t0松弛率: "",
                            重量g: "",
                            "密度g/cm3": "",
                            "平均孔径 μm": "",
                            平均圆度: "",
                            平均面积: "",
                            "等面积圆直径 μm": "",
                            泡体直径: "",
                          },
                          老化: {
                            应力:"",
                            温度:"",
                            编号: "",
                            "样品厚度 mm": "",
                            重量g: "",
                            "密度g/cm3": "",
                            "σ0.4/MPa": "",
                            样品厚度mm: "",
                            永久变形: "",
                            "σ0.4/MPa ": "",
                            "松弛率%": "",
                            "压缩应变在预设点 (载荷 2 N)": "",
                            "平均孔径 μm": "",
                            平均圆度: "",
                            平均面积: "",
                            "等面积圆直径 μm": "",
                            泡体直径: "",
                          },
                        };
                        const data = [fields[type]];
                        exportToExcel(data, type);
                      }}
                    >
                      下载模板
                    </Button> */}

                    <UploadExcel
                      type={type}
                      onChange={(list) => {
                        const field = {
                          不同应力: "poreStructureYlDtoList",
                          松弛: "poreStructureScDtoList",
                          老化: "poreStructureLhDtoList",
                        };
                        formRef.current?.setFieldValue(field[type], list);
                      }}
                    ></UploadExcel>
                  </div>
                  {obj[type] || null}
                </>
              )
            );
          }}
        </ProFormDependency>
      </>
    );
  };

  return (
    <>
      {useCommonTable({
        customTitle: "新增数据",
        onlyTitle: true,
        columns,
        renderFormItem,
        modalWidth: "90%",
        fetchList,
        add,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
        renderAction: (_, record, renderModalForm, actionRef) => {
          return (
            <div style={{ display: "flex" }}>
              {useRemove(remove, record, actionRef)}
              <Button
                className="my-detail-btn"
                style={{ margin: "0 14px" }}
                type="text"
                onClick={() => {
                  history.push(
                    `/pore/detail?id=${record.id}&type=${filterUpType(
                      record.type
                    )}`
                  );
                }}
              >
                查看
              </Button>
              <UploadCsv
                type={filterUpType(record.type)}
                onChange={async (data) => {
                  message.loading({
                    content: "正在导入中!",
                    key: "loading",
                    duration: 0,
                  });
                  const res = await batchResultAdd({
                    poreDataId: record.id,
                    resultList: data,
                  });
                  message.destroy("loading");
                  if (res.data) {
                    message.success("导入成功");
                  }
                }}
              />
            </div>
          );
        },
      })}
    </>
  );
};
